<template>
  <div>
    <div class="action-bar">
      <el-button v-loading="downloadTplLoading" :disabled="!relationId" plain type="primary" size="mini" icon="el-icon-download" title="下载模板" @click="exportTpl">下载Excel模板</el-button>
      <el-upload
        :action="uploadUrl"
        :headers="uploadHeaders"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        :on-success="handleUploadSuccess"
      >
        <el-button :disabled="!relationId" plain type="primary" size="mini" icon="el-icon-upload2" title="导入Excel">导入Excel</el-button>
      </el-upload>
      <el-button type="text" size="mini" icon="el-icon-delete" @click="remove">删除</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from '@neu/biz-core/utils/auth'
import { upload } from '@neu/cmdb-ui/api/relationinstance'

export default {
  name: 'CmdbRelationTableActionBar',
  props: {
    relationId: {
      type: String,
      default: ''
    },
    downloadTplCompleted: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    uploadHeaders: function() {
      return {
        'Authentication': getToken()
      }
    },
    downloadTplLoading: function() {
      return this.downloadTplCompleted
    },
    uploadUrl: function() {
      return upload(this.relationId)
    }
  },
  methods: {
    handleBeforeUpload() {
      this.$emit('on-before-upload')
    },
    handleUploadSuccess(response) {
      if (response.status === 'success') {
        this.$emit('on-success-upload', response.data)
      } else {
        this.$emit('on-fail-upload', response.data)
      }
    },
    exportTpl() {
      this.$emit('on-download-tpl')
    },
    remove() {
      this.$emit('on-remove')
    }
  }
}
</script>
